Next.js Interception Routes: Modal va Overlay Shakllarini Mukammal O'zlashtirish

Mashhur React freymvorki bo'lgan Next.js yuqori unumdorlikka ega va kengaytiriladigan veb-ilovalar yaratish uchun kuchli xususiyatlarni taklif etadi. Shunday xususiyatlardan biri, Interception Routes, murakkab marshrutlash senariylarini, ayniqsa modal va overlay shakllarini tatbiq etishda zamonaviy yechim beradi. Ushbu keng qamrovli qo'llanma uzluksiz va jozibali foydalanuvchi tajribasini yaratish uchun Interception Routes'dan qanday foydalanishni o'rganadi.

Interception Routes nima?

Interception Routes sizga marshrutni to'xtatib, brauzerdagi URL manzilini o'zgartirmasdan boshqa foydalanuvchi interfeysini (UI) render qilish imkonini beradi. Buni foydalanuvchi tajribasini boyitadigan vaqtinchalik aylanma yo'l deb tasavvur qiling. Bu ayniqsa quyidagilar uchun foydalidir:

• Modallar: Yangi sahifaga o'tmasdan kontentni modal oynada ko'rsatish.
• Overlay'lar: Mavjud kontent ustida qo'shimcha ma'lumot yoki boshqaruv elementlarini ko'rsatish.
• Rasmlar galereyalari: Rasmlar galereyasi ichida silliq, sahifaga o'xshash navigatsiya tajribasini yaratish.
• Onboarding oqimlari: Foydalanuvchilarni to'liq sahifani qayta yuklamasdan ko'p bosqichli jarayon orqali yo'naltirish.

Nima uchun Modallar va Overlay'lar uchun Interception Routes'dan foydalanish kerak?

Modallar va overlay'larni boshqarishning an'anaviy usullari ko'pincha komponent ichidagi holatni (state) boshqarishni o'z ichiga oladi, bu esa murakkablashishi va unumdorlik muammolariga olib kelishi mumkin. Interception Routes bir nechta afzalliklarni taklif etadi:

• Yaxshilangan SEO: Modal yoki overlay'da ko'rsatilgan kontent qidiruv tizimlari uchun hali ham mavjud bo'ladi, chunki u ma'lum bir marshrut bilan bog'langan.
• Ulashish mumkin bo'lgan URL'lar: Foydalanuvchilar modal yoki overlay kontentiga to'g'ridan-to'g'ri havolani ulashishlari mumkin.
• Brauzer tarixi: Brauzerning "orqaga" va "oldinga" tugmalari kutilganidek ishlaydi, bu foydalanuvchilarga modal tarixi bo'ylab harakatlanish imkonini beradi.
• Soddalashtirilgan holat boshqaruvi: Modal ko'rinishi holatini boshqarishdagi murakkablikning kamayishi, bu esa toza va qo'llab-quvvatlanishi oson kodga olib keladi.
• Yaxshilangan unumdorlik: Faqat modal kontentini yangilab, keraksiz qayta renderlardan qoching.

Next.js'da Interception Routes'ni sozlash

Keling, Interception Routes'ni qanday amalga oshirishni amaliy misol bilan ko'rib chiqamiz: elektron tijorat ilovasida mahsulot tafsilotlarini ko'rsatish uchun modal yaratish.

Loyiha tuzilmasi

Birinchidan, papkalar tuzilmasini aniqlab olaylik. Tasavvur qiling, bizda `products` papkasi bor va har bir mahsulotning o'ziga xos ID'si mavjud.

app/
  products/
    [id]/
      page.js       // Mahsulot tafsilotlari sahifasi
    @modal/
      [id]/
        page.js   // Mahsulot tafsilotlari uchun modal kontenti
    default.js  // products papkasi uchun layout
  page.js           // Bosh sahifa

Tushuntirish

• `app/products/[id]/page.js`: Bu asosiy mahsulot tafsilotlari sahifasi.
• `app/products/@modal/[id]/page.js`: Bu modal kontentini render qiladigan Interception Route'ni belgilaydi. `@modal` konventsiyasiga e'tibor bering - bu Next.js'ning marshrutni to'sishini tanib olishi uchun muhimdir.
• `app/products/default.js`: Bu `products` papkasi uchun layout. `@modal` marshrutini ushbu layout ichiga o'rash kerak.
• `app/page.js`: Bizning mahsulotlarimizga havolalarni o'z ichiga olgan bosh sahifa.

Kod implementatsiyasi

1. Bosh sahifa (app/page.js)

Ushbu sahifada mahsulotlar ro'yxati ko'rsatiladi, har biri mahsulot tafsilotlarini modalda ochadigan havolaga ega.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Noutbuk' },
 { id: '2', name: 'Smartfon' },
 { id: '3', name: 'Planshet' },
];

export default function Home() {
 return (
 

 
Mahsulotlar ro'yxati
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. Mahsulot tafsilotlari sahifasi (app/products/[id]/page.js)

Ushbu sahifa to'liq mahsulot tafsilotlarini render qiladi. Haqiqiy ilovada bu ma'lumotlar API yoki ma'lumotlar bazasidan olinadi. Muhimi, u asl mahsulotlar ro'yxatiga qaytish havolasini taqdim etadi.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Mahsulot tafsilotlari
 
Mahsulot ID: {id}
 
Bu to'liq mahsulot tafsilotlari sahifasi.
 Mahsulotlar ro'yxatiga qaytish
 
 );
}

3. Modal kontenti (app/products/@modal/[id]/page.js)

Bu eng muhim qism - Interception Route. U bir xil mahsulot ID'sidan foydalanib modal kontentini render qiladi. ID'ga kirish uchun `useParams` hook'iga e'tibor bering.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Mahsulot Modali
 
Mahsulot ID: {id}
 
Ushbu kontent modal ichida render qilinadi!
  history.back()}>Modalni yopish
 
 
 );
}

Eslatma: `'use client';` direktivasi mijoz tomonidagi interaktivlik uchun, ayniqsa `useParams` dan foydalanganda zarur.

Stillashtirish (modal.module.css): Oddiy CSS moduli asosiy modal stilizatsiyasi uchun ishlatiladi. Bu modalni to'g'ri joylashtirish uchun juda muhim.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Uning yuqorida turishini ta'minlang */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Layout (app/products/default.js)

Ushbu layout `@modal` marshrutini o'rab oladi va uning mahsulot konteksti ichida render qilinishini ta'minlaydi.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

U qanday ishlaydi

1. Foydalanuvchi bosh sahifadagi mahsulot havolasini bosganida (masalan, `/products/1`), Next.js buni `products` papkasi ichidagi marshrut sifatida tan oladi.
2. `@modal` marshrutini to'sish tufayli, Next.js `@modal` ostida mos keladigan marshrut bor-yo'qligini tekshiradi.
3. Agar moslik topilsa (masalan, `/products/@modal/1`), Next.js `app/products/@modal/[id]/page.js` dan olingan kontentni joriy sahifa ichida render qiladi. Brauzerdagi URL `/products/1` bo'lib qoladi.
4. `modalOverlay` stillari modalni asosiy kontent ustida joylashtiradi.
5. "Modalni yopish" tugmasini bosish orqaga qaytish uchun `history.back()` dan foydalanadi, bu esa modalni samarali yopadi va oldingi holatga qaytadi.

Interception Route'ning ilg'or texnikalari

1. "Orqaga" tugmasini boshqarish

Modalni amalga oshirishning muhim jihati bu brauzerning "orqaga" tugmasi bilan to'g'ri ishlashini ta'minlashdir. Foydalanuvchi modalni ochib, keyin "orqaga" tugmasini bosganda, ular ilovadan uzoqlashmasdan, ideal holda modalni yopib, oldingi kontekstga qaytishlari kerak.

Misolda ishlatilgan `history.back()` usuli brauzer tarixida bir qadam orqaga o'tish orqali bu effektga erishadi. Biroq, murakkabroq stsenariylar uchun joriy marshrutlash holatini hisobga oladigan maxsus "orqaga" tugmasi ishlovchisini amalga oshirishingiz kerak bo'lishi mumkin.

2. Dinamik modal kontenti

Haqiqiy ilovalarda modal kontenti, ehtimol, mahsulot ID'siga asoslanib API yoki ma'lumotlar bazasidan olingan dinamik bo'ladi. Kerakli ma'lumotlarni olish uchun modal komponenti ichida `fetch` API yoki SWR yoki React Query kabi ma'lumotlarni olish kutubxonasidan foydalanishingiz mumkin.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // O'zingizning API manzilingiz bilan almashtiring
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Yuklanmoqda...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... boshqa mahsulot tafsilotlari ... */}
  history.back()}>Modalni yopish
 
 );
}

3. Ichma-ich modallar

Interception Routes murakkab modal ish oqimlarini yaratish uchun ichma-ich joylashtirilishi mumkin. Masalan, foydalanuvchi mahsulot tafsilotlari modalini ochishi va keyin bog'liq mahsulot modalini ochish uchun tugmani bosishi mumkin. Bunga `@modal` papkasi ichida qo'shimcha marshrutlarni to'sish orqali erishish mumkin.

4. 404 xatoliklarini boshqarish

Foydalanuvchi noto'g'ri mahsulot ID'si bilan modal URL'iga o'tadigan stsenariyni ko'rib chiqing (masalan, `/products/@modal/nonexistent`). Foydalanuvchiga qulay 404 sahifasini ko'rsatish yoki foydalanuvchini haqiqiy mahsulot sahifasiga yo'naltirish uchun to'g'ri xatoliklarni qayta ishlashni amalga oshirishingiz kerak.

// app/products/@modal/[id]/page.js

// ... (komponentning qolgan qismi)

 if (!product) {
 return 
Mahsulot topilmadi.
; // Yoki 404 sahifasiga yo'naltirish
 }

// ... (komponentning qolgan qismi)

5. Overlay shakllari

Misollar modallarga qaratilgan bo'lsa-da, Interception Routes overlay'lar uchun ham ishlatilishi mumkin. Kontentni markazlashtirish o'rniga, overlay yon panel yoki ekranning yon tomonidan sirg'alib kiradigan panel sifatida paydo bo'lishi mumkin. CSS uslubi boshqacha bo'ladi, lekin marshrutlash mantig'i bir xil bo'lib qoladi.

Real hayotiy misollar va qo'llash holatlari

• Elektron tijorat: Mahsulot tafsilotlari, xarid savatchasi xulosalari yoki to'lov jarayonlarini modal yoki overlay'da ko'rsatish.
• Ijtimoiy tarmoqlar: Rasmlarni oldindan ko'rish, sharhlar bo'limlari yoki foydalanuvchi profillarini modalda ko'rsatish.
• Hujjatlarni boshqarish: Hujjatlarni oldindan ko'rish, tahrirlash vositalari yoki versiya tarixini overlay'da ko'rsatish.
• Xaritalash ilovalari: Joylashuv tafsilotlari, diqqatga sazovor joylar yoki marshrut ma'lumotlarini overlay'da ko'rsatish.
• CRM tizimlari: Kontakt ma'lumotlari, faoliyat jurnallari yoki savdo imkoniyatlarini modalda ko'rsatish.

Misol: Xalqaro elektron tijorat platformasi Global elektron tijorat saytini tasavvur qiling. Foydalanuvchi mahsulotni bosganda, tafsilotlar modalda ochiladi. URL `/products/[product_id]` ga o'zgaradi, bu to'g'ridan-to'g'ri havola berish va SEO afzalliklariga imkon beradi. Agar foydalanuvchi modal sahifasida tillarni o'zgartirsa (masalan, ingliz tilidan ispan tiliga), mahsulot tafsilotlari tanlangan tilda olinadi va modal kontenti uzluksiz yangilanadi. Bundan tashqari, sayt foydalanuvchining joylashuvini (rozilik bilan) aniqlashi va ularning mintaqasiga tegishli yetkazib berish ma'lumotlarini modal ichida ko'rsatishi mumkin.

Interception Routes'dan foydalanish bo'yicha eng yaxshi amaliyotlar

• Modal kontentini qisqa tuting: Modalni juda ko'p ma'lumot bilan ortiqcha yuklashdan saqlaning. Asosiy tafsilotlarni taqdim etishga e'tibor qarating.
• Aniq navigatsiyani ta'minlang: Foydalanuvchilar modalni osongina yopishi va oldingi kontekstga qaytishi mumkinligiga ishonch hosil qiling.
• Mobil qurilmalar uchun optimallashtiring: Modal maketini kichik ekranlarda sezgir va foydalanuvchiga qulay qilib loyihalashtiring.
• Puxta sinovdan o'tkazing: Bir xil tajribani ta'minlash uchun turli brauzerlar va qurilmalarda modal xatti-harakatini sinab ko'ring.
• Kirish imkoniyatini hisobga oling: Modalni nogironligi bo'lgan foydalanuvchilar uchun qulay qilish uchun to'g'ri ARIA atributlari va klaviatura navigatsiyasini amalga oshiring.

Interception Routes'ga alternativlar

Interception Routes modal va overlay shakllari uchun kuchli yechim taklif qilsa-da, boshqa yondashuvlarni ham ko'rib chiqish mumkin:

• An'anaviy holat boshqaruvi: Modal ko'rinishini nazorat qilish uchun React'ning `useState` hook'idan yoki Redux yoki Zustand kabi holat boshqaruvi kutubxonasidan foydalanish. Bu juda oddiy modal implementatsiyalari uchun soddaroq, ammo keng miqyosda boshqarish qiyinlashadi.
• Uchinchi tomon modal kutubxonalari: React Modal yoki Material UI kabi kutubxonalardan oldindan tayyorlangan modal komponentlaridan foydalanish. Bular tezkor yechimni ta'minlashi mumkin, ammo sozlash imkoniyatlarini cheklashi mumkin.
• Mijoz tomonidagi marshrutlash kutubxonalari: React Router kabi kutubxonalar mijoz tomonidagi marshrutlash va modal ko'rinishini boshqarish uchun ishlatilishi mumkin.

Xulosa

Next.js Interception Routes veb-ilovalaringizda modal va overlay shakllarini amalga oshirishning mustahkam va nafis usulini taqdim etadi. Ushbu kuchli xususiyatdan foydalanib, siz uzluksiz, SEO-ga mos va foydalanuvchiga qulay tajribalar yaratishingiz mumkin. Alternativ yondashuvlar mavjud bo'lsa-da, Interception Routes afzalliklarning noyob kombinatsiyasini taklif etadi, bu ularni har qanday Next.js dasturchisining arsenalidagi qimmatli vositaga aylantiradi.

Qo'shimcha manbalar

• Next.js Interception Routes Hujjatlari
• React Hujjatlari